<template>
<div>
	<!-- <div class="g_top_box">
		<div class="g_right_box">
			<Button @click="download" style="margin-right:20px;">下载案例</Button>
			<Button type="primary" @click="import_data">导入数据</Button>
			
		</div> 
		<div class="g_left_box"><h4>银行记账列表</h4></div>
	</div> -->
	<content_top title="银行日记账" nextMonth="1"></content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>筛选查询</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="qurey">查询结果</Button>
				</ButtonGroup>
				<div class="g_other">
					<a>清除筛选</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Form  :label-width="90" style="width: 100%" inline>
				<FormItem label="公司主体：">
					<company_list v-model="filter.company" field="sx_name" style="width:150px;" :multiple="true"></company_list>
				</FormItem>
				<FormItem label="币种：">
					<currency_filter v-model="filter.bz" field="name" style="width:150px;"></currency_filter>
				</FormItem>
				<FormItem label="时间：">
					<DatePicker :value="filter.date_month" type="month" placeholder="选择月份" style="width: 150px" @on-change="month_change"></DatePicker>
				</FormItem>
			</Form>
		</div>
	</div>

	<div class="g_box">
		<div class="g_head">
			<h3>横向表头</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="prev_xlist">延用上次设定</Button>
				</ButtonGroup>
				<div class="g_other">
					<a @click="clean_all">全部清除</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Row  class="kemu">
				<Col span="6">
					<Form  :label-width="90" style="width: 100%" inline>
						<FormItem label="科目：">
							<subject_filter v-model="subject_x" field="name" style="width:150px;"></subject_filter>
						</FormItem>
					</Form>
					<div style="padding-left: 90px;"><Button @click="handleAddXList">添加</Button></div>
					
				</Col>
				<Col span="18" class="kemu_list">
					<ul>
						<li v-for="(val,index) in filter.xList" :key="index">
							<span class="x_span">{{val}}</span> 
							<span class="act" style="color:#1abc9c;"  @click="handleDeleteXList(index)">删除</span>
						</li>
					</ul>
				</Col>
			</Row>
			<div>
				
			</div>
			
		</div>
	</div>
	<!-- 表格 -->
	<table_tem v-model="table.show" :cdata="list" :filter="filter.xList"></table_tem>

</div>
</template>

<script>
import content_top from '@/themes/components/content_top';
import table_tem from './table_tem';
import company_list from '@/themes/components/company_list';
import currency_filter from '@/themes/components/currency_filter';
import subject_filter from '@/themes/components/subject_filter';
import Wcore from '@/libs/common';

export default {
    name: 'income_list',
	components:{
		content_top,
		table_tem,
		company_list,
		currency_filter,
		subject_filter
	},
    data () {
		let self = this;
        return {
			subject_x:'',
			table:{
				show:false
			},
            list:[],
			loading:false,
			filter:{
				company:'',
				bz:'人民币',
				date_month:new Date().Format('yyyy-MM'),
				xList:[]
			},
        };
	},
	
	created(){
		var user = this.$store.state.user.user_info;
		this.filter.company = user.company;
		
		// var keepdata = Wcore.getData('kList');console.log(keepdata)
		// if(!keepdata){
		// 	if (this.subject_x == '') {
		// 		this.filter.xList = ['801商帳佣金'];
		// 	}
		// 	this.load_data();
		// }else{
		// 	this.prev_xlist();
		// 	self.list = keepdata;
		// }
		if (this.subject_x == '') {
			this.filter.xList = ['801商帳佣金'];
		}
		this.filter.xList = JSON.parse(Wcore.getData('incomeFilter')) || ['801商帳佣金'];
		this.load_data();
		
	},
    computed: {
       
    },
	methods:{
		// 添加
		handleAddXList() {
			
			if (this.subject_x !== '' && this.subject_x !== undefined) {
				
				this.filter.xList = this.filter.xList.filter(item => item !==this.subject_x);
				this.filter.xList.push(this.subject_x);
				
				Wcore.setData('xList',this.filter.xList);
			}
		},
		// 删除
		handleDeleteXList(id) {
			this.filter.xList.splice(id,1);
			
			Wcore.setData('xList',this.filter.xList);
		},
		//延用上次
		prev_xlist(){
			var data = Wcore.getData('xList');
			if(!data){
				return ;
			}
			
			this.filter.xList = data;
		},
		load_data(){
			var self = this;
			var postdata = {
				f:this.filter
			}
			
			
			Whttp.load('Chuna/Income/get_list',postdata,function(result){
				self.list = result;
				
			});
		},
		qurey(){
			
			this.load_data();
		},
		month_change(date){
			this.filter.date_month =  date;
		},
		clean_all(){
			localStorage.removeItem('incomeFilter')
		}
	}
};
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}

.x_span{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 14px;
}
.kemu_list{
	
}
.kemu_list li{
	    display: inline-block;
    line-height: 30px;
    text-align: center;
    width: 170px;
    position: relative;
}
.kemu_list li .x_span{}
.kemu_list li .act{
	    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.78);
    display: none;
    cursor: pointer;
}
.kemu_list li:hover .act{
	display:block;
}
</style>